<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title id="eachteamtitle"></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="format-detection" content="telephone=no">
		<link rel="shortcut icon" href="images/title.jpg">
		<link rel="stylesheet" href="layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css">
		<link rel="stylesheet" href="datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css">
		<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			.layui-table {
				text-align: center;
			}
			
			ul.layui-nav:nth-child(1) {
				margin-left: 0px;
			}
			
			#layer1 {
				background-color: #009688;
			}
			#groupTable thead th{
			    border-bottom: 0px white;
			}
			table.dataTable{
				border-collapse:collapse;
			}
		</style>

	</head>

	<body>
		<div class="layui-layout layui-layout-admin">
			<!--头部导航-->
			<div class="layui-header header header-demo"></div>
			<!--左侧导航-->
			<div class="layui-side layui-bg-black" id="admin-side"></div>
			<!--右侧具体内容-->

			<div class="layui-body" style="bottom: 0;padding:20px" id="admin-body">
				<div>
					<div style="float:left">
						<div class="title" style="float:left" >类别组: </div>
						<div id="searchteamname" class="title searchteamname" style="float:right;margin-left: 10px;"></div>
					</div>
					<div style="float:right">
						<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" id="layer1" style="float: left;">新建类别组</button>
						
		                <button class="layui-btn layui-btn-normal" id="back" style="float: right;background-color:#009688">返回</button>
	                </div>
                </div>
				<hr/ style="border-color: #858585;">
					<div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
      				<div class="layui-card">
        			
        			<div class="layui-card-body">
          <table class="layui-table" id="groupTable">
							<thead>
								<tr>

									<th style="width: 500px;text-align: center;">类别组</th>
									<th style="text-align: center;">操作1</th>
									<th style="text-align: center;">操作2</th>
									<th style="text-align: center;">操作3</th>
									<th style="text-align: center;">操作4</th>
								</tr>
							</thead>
							<tbody id="tbodysh">
								
							</tbody>
						</table>
        			</div>
      				</div>
    				</div>
  					</div>
    				</div>
					
						

					
					
			</div>

		</div>
		<!--JS模块-->

		<script type="text/javascript" src="layui/layui.js"></script>
		<script src="js/jquery-1.12.3.min.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/dateRange.js"></script>
		<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
		var content="";
		/*var configJson='config.json'
			$.getJSON(configJson,function(data){
				ip=data.urlip;
			})*/
			var ip="http://qure.zjgsu.edu.cn";
		var url=decodeURI(window.location.search);
		var C1 = url.split("?")[1];
	    var C2=C1.split("&")[0];
	    var id = C2.split("=")[1];
		var T1=C1.split("&")[1];
		var T2=T1.split("=")[1];
		 
		//给表格填充数据
		function redata(id) {
			$.ajax({
				type: "get",
				url:ip+"/surveyGroup/getGroup?surveyGroupId="+id,
				data: {},
				xhrFields: {
						withCredentials: true
						},
				crossDomain: true,
				async: true,
				dataType: "json",
				contentType: "application/json",
				success: function(res) {
					content=res.data;
					console.log(content);
					adddata(res);
				
				},
			});
		}
		
		//填充数据具体步骤
		function adddata(obj) {
			$('#groupTable').dataTable().fnClearTable();
			$.each(obj.data, function(index, item) {
				$('#groupTable').dataTable().fnAddData([
				  index,
				  '<div class="layui-btn layui-btn-danger layui-btn-small addpeople" >添加人员</div>',
				  '<div class="layui-btn layui-btn-normal layui-btn-small check" >查看</div>',
				  '<div class="layui-btn layui-btn-warm layui-btn-small edit" id="'+index+'" >编辑</div> ',
				  '<div class="layui-btn layui-btn-warm layui-btn-small delete" >删除</div> '
				  
				]);
			});
		}
		
		//编辑按钮
		$(document).on('click','.edit',function(){
			layer.open({
				type:1,
				title: '编辑类别组名称',
				skin: 'layui-layer-rim', //加上边框
  				area: ['300px', '200px'], //宽高
				content: '<input type="text" id="editname" name="groupname"style="height:30px;margin-top: 35px;margin-left: 30px;"><input type="button" value="确定"id="editsearchgroup"class="layui-btn layui-btn-sm " style="margin-left:70%;width:20%;height:20%">',
			
			});
		
			oldname=this.id;
		})
		
		//编辑
		$(document).on('click',"#editsearchgroup",function(){
			var name=$('#editname').val();
			$.ajax({
				type: "put",
				url:ip+"/surveyGroup/updateGroup",
				data:JSON.stringify({
				    	"surveyGroupId": id,
						"oldGroupName": oldname,
						"newGroupName": name
  					
  					}),
  					xhrFields: {
						withCredentials: true
						},
				crossDomain: true,
				async: true,
				dataType: "json",
				contentType: "application/json",
				success: function(res) {
					if(res.code==0){
					
					 redata(id);
					 layer.msg("编辑成功！");
					}
					if(res.code==-1){
						layer.msg(res.msg);
						
					}
					
				},
				
			});
			
        layer.closeAll('page');
		})
		
		
		//返回按钮
  			 $(document).on('click', '#back', function() {
  			 	window.location.href = "teamManage.html";
  			 })
		
		
		
			$(document).ready(function() {
				//获取id
				C1 = window.location.href.split("?")[1];
				C2=C1.split("&")[0];
				id = C2.split("=")[1];
				//初始化列表
				redata(id);
				//添加按钮
				$("#layer1").click(function() {
					//从网址获取id
					C1 = window.location.href.split("?")[1];
					C2=C1.split("&")[0];
					id = C2.split("=")[1];
					//弹窗设置
					layer.open({
						type:1,
						title: '请输入小组名称',
						skin: 'layui-layer-rim', //加上边框
  						area: ['300px', '200px'], //宽高
						content: '<input type="text" id="newgroupname" name="groupname"style="height:30px;margin-top: 35px;margin-left: 30px;"><input type="button" value="确定"id="addgroup"class="layui-btn layui-btn-sm" style="margin-left:70%;width:20%;height:20%">',
						
					});
				});
			});
			
			$(document).on('click', '#addgroup', function() {
				var name=$('#newgroupname').val();
				$.ajax({
					type: "put",
		 						url: ip + "/surveyGroup/addGroup" ,
		 						data: JSON.stringify({
		 							"surveyGroupId":id,
  									"group":name
  								}),
  								xhrFields: {
						withCredentials: true
						},
				crossDomain: true,
		 						async: true,
		 						dataType: "json",
		 						contentType: "application/json",
		 						success: function(res) {
		 							if(res.code==-1){
		 								layer.msg(res.msg);
		 							}
		 							if(res.code==0){
			 							redata(id);
										
									}
		 							
								},
		 						Error: function() {
		 							alert("服务器出错");
		 						}

				
				
			});
			
        layer.closeAll('page');
				
			})
			
			//删除按钮
			 $(document).on('click', '.delete', function() {
			 	
			 	//从网址获取id
				C1 = window.location.href.split("?")[1];
				C2=C1.split("&")[0];
				id = C2.split("=")[1];
				k = $(this).parents("tr").index() + 1;
		 	   var contentkeys=new Array();
		 	    var i=0;
		 	    //获取group的名字
		 	   	$.each(content, function(index) {
    				contentkeys[i]=index;
    				i++;
				});
		 	    var gname=contentkeys[k-1];
		 	    console.log(gname);
		 		layui.use('layer', function() {
		 			var layer = layui.layer;
		 			layer.confirm('是否要删除该类别组', {
		 			btn: ['确定', '取消'],
		 			icon: 2,
		 			title: '提示',
		 			btn1:function(index, layero){
		 				$.ajax({
		 				type: "delete",
		 				url: ip + "/surveyGroup/deleteGroup",
		 				data: JSON.stringify({
		 							"surveyGroupId":id,
  									"group":gname
  								}),
  						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
		 				async: true,
		 				dataType: "json",
		 				contentType: "application/json",
		 				success: function(data) {
		 					if(data.code==0){
		 					$("table#groupTable").find("tr:eq(" + k + ")").remove();
		 					}
		 					if(data.code==-1)
		 					{
		 						layer.msg(data.msg)
		 					}
							layer.close(index);
		 				},
		 				Error: function() {
		 					alert("服务器出错");
		 				}
		 			})
		 				
		 		}
		 			
		 	})
		
		});
			 	
			 	
			 	
			 })
			 
			//添加人员按钮
			$(document).on('click', '.addpeople', function() {
				C1 = window.location.href.split("?")[1];
				C2=C1.split("&")[0];
				id = C2.split("=")[1];
				T1=C1.split("&")[1];
				T2=T1.split("=")[1];
				k = $(this).parents("tr").index();
				var contentkeys=new Array();
		 	    var i=0;
		 	    //获取group的名字
		 	   	$.each(content, function(index) {
    				contentkeys[i]=index;
    				i++;
				});
				
				var group=contentkeys[k];
				 window.location.href = "shaixuan.html?Id=" + id+"&name="+T2+"&group="+group;
			})
		    
		    //查看按钮
		    $(document).on('click', '.check', function() {
				C1 = window.location.href.split("?")[1];
				C2=C1.split("&")[0];
				id = C2.split("=")[1];
				T1=C1.split("&")[1];
				T2=T1.split("=")[1];
				k = $(this).parents("tr").index();
				var contentkeys=new Array();
		 	    var i=0;
		 	    //获取group的名字
		 	   	$.each(content, function(index) {
    				contentkeys[i]=index;
    				i++;
				});
				
				var group=contentkeys[k];
				 window.location.href = "groupcheck.html?Id=" + id+"&name="+T2+"&group="+group;
			})
		    
			function isLogin(){
				$.ajax({
					 				type: "get",
					 				url:ip+"/user/type ",
					 				data: {},
					 				async: true,
					 				dataType: "",
					 				contentType: "application/json",
					 				xhrFields: {
									withCredentials: true
									},
									crossDomain: true,
					 				success: function(res) {
					 					if(res.code==-1){
					 						layui.use('layer', function(){
			  									var layer = layui.layer;
			  									layer.msg(res.msg);
											});     
					 						
					 						window.location.href="login.html";
					 						console.log(res.msg);
					 					}
									
					 				},
					 				Error: function() {
					 					alert("服务器出错");
					 				}
					 			})
}
			
			
			//表格的一些选项设置
			$('#groupTable').DataTable({
                    responsive: true,
                    ordering: false,
                    searching: false,
                    "bLengthChange": false,
                    "bRetrieve": true,
                    "bFilter": true, //过滤功能
                    "info": false,  
                     "paging": false, 
                     language: {
       					"sProcessing": "处理中...",
       					"sLengthMenu": "显示 _MENU_ 项结果",
       					"sZeroRecords": "没有匹配结果",
       					"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
       					"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
       					"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
       					"sInfoPostFix": "",
       					"sSearch": "搜索:",
       					"sUrl": "",
       					"sEmptyTable": "表中数据为空",
      					"sLoadingRecords": "载入中...",
       					"sInfoThousands": ",",
				       "oPaginate": {
				           "sFirst": "首页",
				           "sPrevious": "上页",
				           "sNext": "下页",
				           "sLast": "末页"
				       },
				       "oAria": {
				           "sSortAscending": ": 以升序排列此列",
				           "sSortDescending": ": 以降序排列此列"
				       }
  				 }
                });
            $('#searchteamname').html(T2); 
             $('#eachteamtitle').html("类别组列表——"+T2);
            $(function() {
					isLogin();
			});

            
		</script>

	</body>

</html>